<template>
  <div id="sample-manage">
    <el-card v-loading="loading" class="box-card" style="margin:15px">
      <el-form
        ref="basicForm"
        :rules="basicDataRules"
        :inline="true"
        :model="basicData"
        size="small"
        label-width="125px"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="所属区县:" prop="areaId.key">
              <el-select
                size="mini"
                v-model="basicData.areaId.key"
                placeholder="选择"
                @change="clickOrgTree"
              >
                <el-option
                  v-for="(item, index) in orgTree"
                  :key="index"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属医院:" prop="hospitalId.key">
              <el-select
                size="mini"
                v-model="basicData.hospitalId.key"
                placeholder="选择"
                @change="clickOrgTreeC"
              >
                <el-option
                  v-for="(item, index) in orgTreeC"
                  :key="index"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属部门:" prop="departId.key">
              <el-select size="mini" v-model="basicData.departId.key" placeholder="选择">
                <el-option
                  v-for="(item, index) in orgTreeCs"
                  :key="index"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6"></el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="婴儿体重:" prop="weight">
              <el-input
                size="mini"
                v-model="basicData.weight"
                type="text"
                oninput="value=value.replace(/[^\d.]/g,'')"
                placeholder="输入"
                maxlength="4"
              >
                <template slot="append">克</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="孕周:" prop="weeks">
              <el-input
                size="mini"
                v-model="basicData.weeks"
                type="text"
                oninput="value=value.replace(/[^\d.]/g,'')"
                placeholder="输入"
                maxlength="2"
              >
                <template slot="append">周</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="孕天:" prop="days">
              <el-input
                size="mini"
                v-model="basicData.days"
                placeholder="输入"
                type="text"
                oninput="value=value.replace(/[^\d.]/g,'')"
                maxlength="1"
              >
                <template slot="append">天</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="户口类型:" prop="accountType">
              <el-radio-group v-model="basicData.accountType.key">
                <el-radio
                  v-for="(item, key, index) in dicts.ACCOUNT_TYPE"
                  :key="item"
                  :label="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="出生日期:" prop="birthTime">
              <el-date-picker
                :format="birthTimeFormat"
                @focus="basicData.birthTime = ''"
                v-model="basicData.birthTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别:" prop="babySex">
              <el-radio-group v-model="basicData.babySex.key">
                <el-radio
                  v-for="(item, key, index) in dicts.BABY_SEX"
                  :key="item"
                  :label="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="母亲姓名:" prop="momName">
              <el-input size="mini" v-model="basicData.momName" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号码:" prop="phone">
              <el-input
                size="mini"
                v-model="basicData.phone"
                placeholder="输入"
                type="text"
                maxlength="11"
                oninput="value=value.replace(/[^\d.]/g,'')"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="母亲身份证:" prop="momCard">
              <el-input size="mini" v-model="basicData.momCard" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="母亲户籍:" prop="momCensus">
              <el-radio-group v-model="basicData.momCensus.key">
                <el-radio
                  v-for="(item, key, index) in dicts.MOM_CENSUS"
                  :key="item"
                  :label="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="住址:" prop="address">
              <el-input size="mini" v-model="basicData.address" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="父亲身份证:" prop="dadCard">
              <el-input size="mini" v-model="basicData.dadCard" placeholder="输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="条形码号:" prop="barCode">
              <el-input size="mini" v-model="basicData.barCode" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="采血日期:" prop="bloodTime">
              <el-date-picker
                size="mini"
                :format="bloodTimeFormat"
                @focus="basicData.bloodTime = ''"
                v-model="basicData.bloodTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="样本质量:" prop="sampleQuality">
              <el-select size="mini" v-model="basicData.sampleQuality.key" placeholder="样本质量">
                <el-option
                  v-for="(item, key, index) in dicts.SAMPLE_QUALITY"
                  :key="item"
                  :label="item"
                  :value="key"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="采血人:" prop="samplingPeople">
              <el-input size="mini" v-model="basicData.samplingPeople" placeholder="输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="费用类型:" prop="costType">
              <el-radio-group v-model="basicData.costType.key">
                <el-radio
                  v-for="(item, key, index) in dicts.COST_TYPE"
                  :key="item"
                  :label="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="采血编号:" prop="bloodNum">
              <el-input size="mini" v-model="basicData.bloodNum" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="送检医生:" prop="getexamineDoctor">
              <el-input size="mini" v-model="basicData.getexamineDoctor" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实验编号:" prop="expNum">
              <el-input size="mini" v-model="basicData.expNum" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="免费券号:" prop="freeNum">
              <el-input size="mini" v-model="basicData.freeNum" placeholder="输入" maxlength="9" />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="实验项目:" prop="projectIdList" class="pj">
              <el-checkbox-group v-model="basicData.experimentProject">
                <el-checkbox
                  v-for="(item, key, index) in dicts.EXPERIMENT_CODE"
                  :label="key"
                  name="type"
                >{{ item }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" id="more-row">
            <el-form-item label="筛查备注:" label-width="66px" style="margin-left:1.9vw" prop="remark">
              <el-input size="mini" v-model="basicData.remark" type="textarea" placeholder="输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="buttom" style="padding-top:15px">
        <el-button
          type="primary"
          size="small"
          style="width:120px"
          icon="el-icon-document-checked"
          @click="onSubmit('add')"
        >保存</el-button>
        <el-button size="small" @click="onSubmit('reset')">重置</el-button>
        <el-button size="small" icon="el-icon-printer" @click="onSubmit('addAndPrint')">保存并打印</el-button>
      </div>
    </el-card>
    <el-card class="box-card" style="margin:15px">
      <el-table
        :data="tableData"
        style="width: 100%;padding:5px;"
        :header-cell-style="{
          background: '#333333',
          color: '#ffffff',
          textAlign: 'center'
        }"
      >
        <el-table-column align="center" prop="hospitalId" label="所属医院">
          <template slot-scope="scope">
            <span>{{ scope.row.hospitalId.data.label }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="momName" label="母亲姓名" />
        <el-table-column align="center" prop="babySex" label="性别">
          <template slot-scope="scope">
            <span>{{ scope.row.babySex.data }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="barCode" label="条形码号" width="150" />
        <el-table-column align="center" prop="birthTime" label="出生日期" />
        <el-table-column align="center" prop="experimentKeywords.data" label="检测项目" />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="clickLook(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="clickEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="clickDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        :current-page="basicData.current"
        :page-size="basicData.size"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />-->
    </el-card>
    <el-dialog :visible.sync="dialogPrint" width="85%" center custom-class="print-dialog">
      <span
        slot="title"
        class="dialog-title"
        style="font-size: 18px;font-weight: 400;color: #FFFFFF;"
      >{{ loadingTitle }}</span>
      <div
        id="addAndPrints"
        style="overflow: auto;display: flex;flex-direction: column;flex-flow: wrap;min-height: 250px;"
      >
        <div
          v-if="rowData.areaId.data"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">所属区县:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.areaId.data.label
            }}
          </span>
        </div>
        <div
          v-if="rowData.hospitalId.data"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">所属医院:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.hospitalId.data.label
            }}
          </span>
        </div>
        <div
          v-if="rowData.departId.data"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">所属部门:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.departId.data.label
            }}
          </span>
        </div>
        <div
          v-if="rowData.weight"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">婴儿体重:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.weight
            }}
          </span>
        </div>
        <div
          v-if="rowData.weeks"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">孕周:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.weeks
            }}
          </span>
        </div>
        <div
          v-if="rowData.days"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">孕天:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.days
            }}
          </span>
        </div>
        <div
          v-if="rowData.accountType"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">户口类型:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.accountType.data
            }}
          </span>
        </div>
        <div
          v-if="rowData.birthTime"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">出生日期:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.birthTime
            }}
          </span>
        </div>
        <div
          v-if="rowData.babySex"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">性别:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.babySex.data
            }}
          </span>
        </div>
        <div
          v-if="rowData.momName"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">母亲姓名:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.momName
            }}
          </span>
        </div>
        <div
          v-if="rowData.phone"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">手机号码:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.phone
            }}
          </span>
        </div>
        <div
          v-if="rowData.momCensus"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">母亲户籍:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.momCensus.data
            }}
          </span>
        </div>
        <div
          v-if="rowData.bloodNum"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">采血编号:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.bloodNum
            }}
          </span>
        </div>
        <div
          v-if="rowData.barCode"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">条形码号:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.barCode
            }}
          </span>
        </div>

        <div
          v-if="rowData.bloodTime"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">采血日期:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.bloodTime
            }}
          </span>
        </div>

        <div
          v-if="rowData.momCard"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">母亲身份证:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.momCard
            }}
          </span>
        </div>
        <div
          v-if="rowData.address"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">住址:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.address
            }}
          </span>
        </div>

        <div
          v-if="rowData.sampleQuality"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">样本质量:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.sampleQuality.data
            }}
          </span>
        </div>
        <div
          v-if="rowData.samplingPeople"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">采血人:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.samplingPeople
            }}
          </span>
        </div>
        <div
          v-if="rowData.remark"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">筛查备注</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.remark
            }}
          </span>
        </div>
        <div
          v-if="rowData.experimentKeywords"
          style=" width: 33.33%;height: 50px;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">实验项目:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.experimentKeywords.data
            }}
          </span>
        </div>
        <div
          v-if="rowData.costType.length > 0"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">费用类型:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.costType.data
            }}
          </span>
        </div>
        <div
          v-if="rowData.getexamineDoctor"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">送检医生:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.getexamineDoctor
            }}
          </span>
        </div>
        <div
          v-if="rowData.expNum"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">实验编号:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.expNum
            }}
          </span>
        </div>
        <div
          v-if="rowData.freeNum"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">免费券号:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.freeNum
            }}
          </span>
        </div>
        <div
          v-if="rowData.dadCard"
          style=" width: 33.33%;height: 50px;border-bottom: 1px solid #E5E5E5;display: flex;align-items: center;justify-content: center;justify-content: flex-start;color: #222222;font-size: 15px;margin-top: 10px;"
        >
          <span style="font-weight: bold;flex: 0.25;color:#666666;">父亲身份证:</span>
          <span style="flex: 0.6;font-weight: bold;overflow-wrap: anywhere;">
            {{
            rowData.dadCard
            }}
          </span>
        </div>
      </div>
      <span v-if="printStatus" slot="footer" class="dialog-footer">
        <el-button
          v-print="'#addAndPrints'"
          size="small"
          type="primary"
          style="padding: 6px 19px;"
        >打 印</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogEdit" width="85%" center custom-class="print-dialog">
      <span
        slot="title"
        class="dialog-title"
        style="font-size: 18px;font-weight: 400;color: #FFFFFF;"
      >编辑</span>

      <el-form
        ref="editForm"
        :rules="basicDataRules"
        :inline="true"
        :model="selectItem"
        class="demo-form-inline"
        label-width="125px"
        size="small"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="所属区县:" prop="areaId.key">
              <el-select
                size="mini"
                v-model="selectItem.areaId.key"
                placeholder="选择"
                @change="clickOrgTree"
              >
                <el-option
                  v-for="(item, index) in orgTree"
                  :key="index"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="所属医院:" prop="hospitalId.key">
              <el-select
                size="mini"
                v-model="selectItem.hospitalId.key"
                placeholder="选择"
                @change="clickOrgTreeC"
              >
                <el-option
                  v-for="(item, index) in orgTreeC"
                  :key="index"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属部门:" prop="departId.key">
              <el-select size="mini" v-model="selectItem.departId.key" placeholder="选择">
                <el-option
                  v-for="(item, index) in orgTreeCs"
                  :key="index"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="婴儿体重:" prop="weight">
              <el-input
                size="mini"
                v-model="selectItem.weight"
                type="text"
                oninput="value=value.replace(/[^\d.]/g,'')"
                placeholder="输入"
                maxlength="4"
              >
                <template slot="append">克</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="孕周:" prop="weeks">
              <el-input
                size="mini"
                v-model="selectItem.weeks"
                type="text"
                oninput="value=value.replace(/[^\d.]/g,'')"
                placeholder="输入"
                maxlength="2"
              >
                <template slot="append">周</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="孕天:" prop="days">
              <el-input
                size="mini"
                v-model="selectItem.days"
                placeholder="输入"
                type="text"
                oninput="value=value.replace(/[^\d.]/g,'')"
                maxlength="1"
              >
                <template slot="append">天</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="户口类型:" prop="accountType">
              <el-radio-group v-model="selectItem.accountType.key">
                <el-radio
                  v-for="(item, key, index) in dicts.ACCOUNT_TYPE"
                  :key="item"
                  :label="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出生日期:" prop="birthTime">
              <el-date-picker
                size="mini"
                :format="birthTimeFormat"
                @focus="selectItem.birthTime = ''"
                v-model="selectItem.birthTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="性别:" prop="babySex">
              <el-radio-group v-model="selectItem.babySex.key">
                <el-radio
                  v-for="(item, key, index) in dicts.BABY_SEX"
                  :key="item"
                  :label="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="母亲姓名:" prop="momName">
              <el-input size="mini" v-model="selectItem.momName" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号码:" prop="phone">
              <el-input
                size="mini"
                v-model="selectItem.phone"
                placeholder="输入"
                type="text"
                maxlength="11"
                oninput="value=value.replace(/[^\d.]/g,'')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="母亲身份证:" prop="momCard">
              <el-input size="mini" v-model="selectItem.momCard" placeholder="输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="母亲户籍:" prop="momCensus">
              <el-radio-group v-model="selectItem.momCensus.key">
                <el-radio
                  v-for="(item, key, index) in dicts.MOM_CENSUS"
                  :key="item"
                  :label="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="住址:" prop="address">
              <el-input size="mini" v-model="selectItem.address" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="父亲身份证:" prop="dadCard">
              <el-input size="mini" v-model="selectItem.dadCard" placeholder="输入" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="条形码号:" prop="barCode">
              <el-input size="mini" v-model="selectItem.barCode" maxlength="11" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="采血日期:" prop="bloodTime">
              <el-date-picker
                size="mini"
                :format="bloodTimeFormat"
                @focus="selectItem.bloodTime = ''"
                v-model="selectItem.bloodTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="样本质量:" prop="sampleQuality">
              <el-select size="mini" v-model="selectItem.sampleQuality.key" placeholder="样本质量">
                <el-option
                  v-for="(item, key, index) in dicts.SAMPLE_QUALITY"
                  :key="item"
                  :label="item"
                  :value="key"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="采血人:" prop="samplingPeople">
              <el-input size="mini" v-model="selectItem.samplingPeople" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="费用类型:" prop="costType">
              <el-radio-group v-model="selectItem.costType.key">
                <el-radio
                  v-for="(item, key, index) in dicts.COST_TYPE"
                  :key="item"
                  :label="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="采血编号:" prop="bloodNum">
              <el-input size="mini" v-model="selectItem.bloodNum" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="送检医生:" prop="getexamineDoctor">
              <el-input size="mini" v-model="selectItem.getexamineDoctor" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实验编号:" prop="expNum">
              <el-input size="mini" v-model="selectItem.expNum" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="免费券号:" prop="freeNum">
              <el-input size="mini" v-model="selectItem.freeNum" placeholder="输入" maxlength="9" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col id="shiyan" :span="18" class="more-col">
            <el-form-item label="实验项目:" prop="projectIdList" class="pj">
              <el-checkbox-group v-model="selectItem.experimentProject" @change="clickCheckBox">
                <el-checkbox
                  v-for="(item, key, index) in dicts.EXPERIMENT_CODE"
                  :label="key"
                  name="type"
                >{{ item }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="筛查备注:" label-width="66px" prop="remark" style="margin-left:1.9vw">
              <el-input size="mini" v-model="selectItem.remark" type="textarea" placeholder="输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button
          size="small"
          type="primary"
          style="padding: 6px 19px;"
          @click="onSubmit('editSeave')"
        >保存</el-button>
        <el-button size="small" icon="el-icon-printer" @click="onSubmit('editAndPrint')">保存并打印</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { initDicts } from "@/utils/commons";
import orgApi from "@/api/Org.js";
import homeApi from "@/api/home.js";
import SampleManageApi from "@/api/SampleManage.js";
export default {
  data() {
    return {
      // 出生日期输入格式
      birthTimeFormat: "MMdd",
      // 采血日期输入格式
      bloodTimeFormat: "MMdd",
      // 表单转菊花
      loading: false,
      // 打印对话框
      dialogPrint: false,
      // 编辑对话框
      dialogEdit: false,
      // 是否显示打印按钮
      printStatus: true,
      // 弹窗标题
      loadingTitle: "采血卡打印",
      // 表格数据
      tableData: [],
      // 页条数
      pageSize: 10,
      // 页数
      pageIndex: 1,
      // 基本数据
      basicData: {
        // 户口类型【农村/城镇】
        accountType: {
          key: "village"
        },
        // 住址
        address: "",
        // 所属区县
        areaId: {
          key: ""
        },
        // 婴儿性别【男/女/未知】
        babySex: {
          key: "boy"
        },
        // 条形码号
        barCode: "",
        // 出生日期
        birthTime: "",
        // 采血编号
        bloodNum: "",
        // 采血日期
        bloodTime: "",
        // 费用类型【自费/免费】
        costType: {
          key: "selfpaying"
        },
        // 父亲身份证
        dadCard: "",
        // 孕天【0-6之间】
        days: "",
        // 所属部门
        departId: {
          key: ""
        },
        // 实验编号
        expNum: "",
        // 免费劵号
        freeNum: "",
        // 送检医生
        getexamineDoctor: "",
        // 医院id
        hospitalId: {
          key: ""
        },
        // 母亲身份证
        momCard: "",
        // 母亲户籍【本地/外地】
        momCensus: {
          key: "native"
        },
        // 母亲姓名
        momName: "",
        // 手机号码
        phone: "",
        // 筛查备注
        remark: "",
        // 样本质量【默认合格，基础码表】
        sampleQuality: {
          key: ""
        },
        // 采血人
        samplingPeople: "",
        // 孕周【20-50之间】
        weeks: "",
        // 婴儿体重
        weight: "",
        // 实验项目
        experimentProject: ["THA"]
      },
      // 校验
      basicDataRules: {
        "areaId.key": [{ required: true, message: "必填", trigger: "change" }],
        "hospitalId.key": [
          { required: true, message: "必填", trigger: "change" }
        ],
        "departId.key": [
          { required: true, message: "必填", trigger: "change" }
        ],
        momName: [{ required: true, message: "必填", trigger: "change" }],
        phone: [
          { required: true, message: "必填", trigger: "change" },
          {
            required: true,
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确格式的手机号",
            trigger: "blur"
          }
        ],
        weight: [
          { required: true, message: "必填", trigger: "change" },
          {
            pattern: /^[0-9]*$/,
            message: "请填写正确格式的数字",
            trigger: "change"
          },
          {
            required: true,
            validator: this.$weightNum,
            trigger: "blur",
            message: "请输入600—8000的数字"
          }
        ],
        weeks: [
          { required: true, message: "必填", trigger: "change" },
          {
            pattern: /^[0-9]*$/,
            message: "请填写正确格式的数字",
            trigger: "change"
          },
          {
            required: true,
            validator: this.$weeksNum,
            trigger: "blur",
            message: "请输入20—50的数字"
          }
        ],
        // days: [
        //   { required: true, message: "必填", trigger: "change" },
        //   {
        //     pattern: /^[0-9]*$/,
        //     message: "请填写正确格式的数字",
        //     trigger: "change"
        //   },
        //   {
        //     required: true,
        //     validator: this.$daysNum,
        //     trigger: "blur",
        //     message: "请输入0—6的数字"
        //   }
        // ],
        birthTime: [{ required: true, message: "  ", trigger: "change" }],
        bloodTime: [{ required: true, message: "  ", trigger: "change" }],
        babySex: [{ required: true, message: "  ", trigger: "change" }],
        barCode: [
          {
            required: true,
            message: "必填",
            trigger: "change"
          },
          {
            pattern: /^[0-9]*$/,
            message: "请填写正确格式的数字",
            trigger: "change"
          },
          {
            required: true,
            validator: this.$barCodeNum,
            trigger: "blur",
            message: "请输入14000000000—20999999999的数字"
          }
        ],
        costType: [{ required: true, message: "  ", trigger: "change" }],
        dadCard: [
          {
            pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
            message: "身份证号格式错误",
            trigger: "change"
          }
        ],
        momCard: [
          {
            pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
            message: "身份证号格式错误",
            trigger: "change"
          }
        ],
        freeNum: [
          {
            pattern: /^[0-9]*$/,
            message: "请填写正确格式的数字",
            trigger: "change"
          },
          {
            validator: this.$freeNum,
            message: "请输入200110001—200145000的数字",
            trigger: "change"
          }
        ]
      },
      // 字典
      dicts: {
        MOM_CENSUS: {}, //母亲户籍
        BABY_SEX: {}, //婴儿性别
        ACCOUNT_TYPE: {}, //户口类型
        SAMPLE_QUALITY: {}, //样本质量
        EXPERIMENT_CODE: {}, //实验项目
        COST_TYPE: {} //费用类型
      },
      // 市县
      orgTree: [],
      // 医院
      orgTreeC: [],
      // 部门
      orgTreeCs: [],
      // 采样项目id；列表
      ids: [],
      // 当前点击行数据
      rowData: {
        // 户口类型【农村/城镇】
        accountType: {
          key: ""
        },
        // 住址
        address: "",
        // 所属区县
        areaId: {
          key: ""
        },
        // 婴儿性别【男/女/未知】
        babySex: {
          key: ""
        },
        // 条形码号
        barCode: "",
        // 出生日期
        birthTime: "",
        // 采血编号
        bloodNum: "",
        // 采血日期
        bloodTime: "",
        // 费用类型【自费/免费】
        costType: {
          key: ""
        },
        // 父亲身份证
        dadCard: "",
        // 孕天【0-6之间】
        days: "",
        // 所属部门
        departId: {
          key: ""
        },
        // 实验编号
        expNum: "",
        // 免费劵号
        freeNum: "",
        // 送检医生
        getexamineDoctor: "",
        // 医院id
        hospitalId: {
          key: ""
        },
        // 母亲身份证
        momCard: "",
        // 母亲户籍【本地/外地】
        momCensus: {
          key: ""
        },
        // 母亲姓名
        momName: "",
        // 手机号码
        phone: "",
        // 筛查备注
        remark: "",
        // 样本质量【默认合格，基础码表】
        sampleQuality: {
          key: ""
        },
        // 采血人
        samplingPeople: "",
        // 孕周【20-50之间】
        weeks: "",
        // 婴儿体重
        weight: "",
        // 实验项目
        experimentProject: []
      },
      // 当前点击行编辑数据
      selectItem: {
        // 户口类型【农村/城镇】
        accountType: {
          key: ""
        },
        // 住址
        address: "",
        // 所属区县
        areaId: {
          key: ""
        },
        // 婴儿性别【男/女/未知】
        babySex: {
          key: ""
        },
        // 条形码号
        barCode: "",
        // 出生日期
        birthTime: "",
        // 采血编号
        bloodNum: "",
        // 采血日期
        bloodTime: "",
        // 费用类型【自费/免费】
        costType: {
          key: ""
        },
        // 父亲身份证
        dadCard: "",
        // 孕天【0-6之间】
        days: "",
        // 所属部门
        departId: {
          key: ""
        },
        // 实验编号
        expNum: "",
        // 免费劵号
        freeNum: "",
        // 送检医生
        getexamineDoctor: "",
        // 医院id
        hospitalId: {
          key: ""
        },
        // 母亲身份证
        momCard: "",
        // 母亲户籍【本地/外地】
        momCensus: {
          key: ""
        },
        // 母亲姓名
        momName: "",
        // 手机号码
        phone: "",
        // 筛查备注
        remark: "",
        // 样本质量【默认合格，基础码表】
        sampleQuality: {
          key: ""
        },
        // 采血人
        samplingPeople: "",
        // 孕周【20-50之间】
        weeks: "",
        // 婴儿体重
        weight: "",
        // 实验项目
        experimentProject: []
      }
    };
  },
  mounted() {
    // 获取字典
    initDicts(
      [
        "MOM_CENSUS",
        "BABY_SEX",
        "ACCOUNT_TYPE",
        "SAMPLE_QUALITY",
        "COST_TYPE",
        "EXPERIMENT_CODE"
      ],
      this.dicts
    );
    // 获取基础查询
    this.initOrgTree();
  },
  methods: {
    // 默认设置组织
    async setZuZhi() {
      await homeApi
        .getByUser({ id: this.$store.state.account.user.id })
        .then(res => {
          let data = res.data.data;
          this.basicData.areaId.key = data.areaId;
          this.basicData.departId.key = data.departId;
          this.basicData.hospitalId.key = data.hospitalId;

          this.orgTree.filter(res => {
            if (res.id == this.basicData.areaId.key) {
              this.orgTreeC = res.children;
            }
          });
          this.orgTreeC.filter(res => {
            if (res.id == this.basicData.hospitalId.key) {
              this.orgTreeCs = res.children;
            }
          });
        });
    },
    // 出生日期输入
    changeBirthTime(v, type) {
      if (type == "b") {
        this.basicData.birthTime = v;
      }
      this.selectItem.birthTime = v;
      if (this.basicData.birthTime || this.selectItem.birthTime) {
        this.birthTimeFormat = "yyyy-MM-dd";
      } else {
        this.birthTimeFormat = "MMdd";
      }
    },
    // 采血日期输入
    changeBloodTime(v, type) {
      if (type == "b") {
        this.basicData.bloodTime = v;
      }
      this.selectItem.bloodTime = v;
      if (this.basicData.bloodTime || this.selectItem.bloodTime) {
        this.bloodTimeFormat = "yyyy-MM-dd";
      } else {
        this.bloodTimeFormat = "MMdd";
      }
    },
    // 点击删除
    clickDelete(v) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let ids = [];
        this.ids.forEach(item => {
          if (item != v.id) {
            ids.push(item);
          }
        });
        this.ids = ids;
        SampleManageApi.delete({ "ids[]": v.id }).then(res => {
          if (res.status == "200") {
            this.getList();
          } else {
            this.$message.error(res.statusText);
          }
        });
      });
    },
    // 点击编辑
    clickEdit(v) {
      this.rowData = JSON.parse(JSON.stringify(v));
      this.selectItem = Object.assign({}, v);
      this.dialogEdit = true;
    },
    // 修改选择
    clickCheckBox(v) {
      this.selectItem.experimentProject.list = v;
    },
    // 点击查看
    clickLook(v) {
      // 隐藏打印按钮
      this.loadingTitle = "查看";
      this.printStatus = false;
      this.dialogPrint = true;
    },
    // 获取基础查询
    async initOrgTree() {
      await orgApi.allTree({}).then(response => {
        const res = response.data;
        this.orgTree = res.data[0].children;
      });

      this.basicData.samplingPeople = this.$store.state.account.user.name;
      this.setZuZhi();

      if (this.$route.query.id) {
        this.basicData = this.$route.query;

        this.orgTree.filter(res => {
          if (res.id == this.basicData.areaId.key) {
            this.orgTreeC = res.children;
          }
        });
        this.orgTreeC.filter(res => {
          if (res.id == this.basicData.hospitalId.key) {
            this.orgTreeCs = res.children;
          }
        });
      } else {
        this.basicData = {
          // 户口类型【农村/城镇】
          accountType: {
            key: "village"
          },
          // 住址
          address: "",
          // 所属区县
          areaId: {
            key: ""
          },
          // 婴儿性别【男/女/未知】
          babySex: {
            key: "boy"
          },
          // 条形码号
          barCode: "",
          // 出生日期
          birthTime: "",
          // 采血编号
          bloodNum: "",
          // 采血日期
          bloodTime: "",
          // 费用类型【自费/免费】
          costType: {
            key: "selfpaying"
          },
          // 父亲身份证
          dadCard: "",
          // 孕天【0-6之间】
          days: "",
          // 所属部门
          departId: {
            key: ""
          },
          // 实验编号
          expNum: "",
          // 免费劵号
          freeNum: "",
          // 送检医生
          getexamineDoctor: "",
          // 医院id
          hospitalId: {
            key: ""
          },
          // 母亲身份证
          momCard: "",
          // 母亲户籍【本地/外地】
          momCensus: {
            key: "native"
          },
          // 母亲姓名
          momName: "",
          // 手机号码
          phone: "",
          // 筛查备注
          remark: "",
          // 样本质量【默认合格，基础码表】
          sampleQuality: {
            key: ""
          },
          // 采血人
          samplingPeople: "",
          // 孕周【20-50之间】
          weeks: "",
          // 婴儿体重
          weight: "",
          // 实验项目
          experimentProject: ["THA"]
        };
      }
    },
    // 根据id获取当前采集的样本
    getList(ids) {
      SampleManageApi.page(ids || this.ids).then(res => {
        if (res.status == 200) {
          this.tableData = res.data.data;
          if (res.data.data[0]) {
            this.rowData = res.data.data[0];
          }
        }
      });
    },
    // 根据选择市县获取医院
    clickOrgTree(v) {
      this.orgTreeC = [];
      this.orgTreeCs = [];
      this.basicData.hospitalId.key = "";
      this.basicData.departId.key = "";
      this.selectItem.hospitalId.key = "";
      this.selectItem.departId.key = "";
      this.orgTree.filter(res => {
        if (res.id == v) {
          this.orgTreeC = res.children;
        }
      });
    },
    // 根据选择市县获取医院
    clickOrgTreeC(v) {
      this.orgTreeCs = [];
      this.basicData.departId.key = "";
      this.selectItem.departId.key = "";
      this.orgTreeC.filter(res => {
        if (res.id == v) {
          this.orgTreeCs = res.children;
        }
      });
    },
    // 三个按钮点击事件
    onSubmit(type) {
      if (type == "add") {
        if (this.$route.query.id) {
          // 保存
          // 如果为true则验证表单
          let p1 = new Promise(resolve => {
            this.$refs["basicForm"].validate(valid => {
              if (valid) resolve();
            });
          });
          // 利用Promise异步校验表单，同时通过则进行下一步操作
          Promise.all([p1]).then(() => {
            this.loading = true;
            this.$router.push({ query: {} });
            SampleManageApi.notupdate(this.basicData).then(res => {
              if (res.status == "200") {
                this.ids.push(res.data.data.id);
                this.getList();
                this.$refs["basicForm"].resetFields();
                this.loading = false;
              } else {
                this.$message.error(res.statusText);
                this.loading = false;
              }
            });
          });
        } else {
          // 保存
          // 如果为true则验证表单
          let p1 = new Promise(resolve => {
            this.$refs["basicForm"].validate(valid => {
              if (valid) resolve();
            });
          });
          // 利用Promise异步校验表单，同时通过则进行下一步操作
          Promise.all([p1]).then(() => {
            this.loading = true;
            SampleManageApi.save(this.basicData).then(res => {
              if (res.status == "200") {
                this.ids.push(res.data.data.id);
                this.getList();
                this.$refs["basicForm"].resetFields();
                this.loading = false;
              } else {
                this.$message.error(res.statusText);
                this.loading = false;
              }
            });
          });
        }
      } else if (type == "reset") {
        // 重置
        // 如果为true则清空表单
        this.$refs["basicForm"].resetFields();
      } else if (type == "addAndPrint") {
        // 打印并保存
        this.printStatus = true;
        this.loadingTitle = "采血卡打印";
        // 如果为true则验证表单
        let p1 = new Promise(resolve => {
          this.$refs["basicForm"].validate(valid => {
            if (valid) resolve();
          });
        });
        // 利用Promise异步校验表单，同时通过则进行下一步操作
        Promise.all([p1]).then(() => {
          // 打印
          this.loading = true;
          SampleManageApi.save(this.basicData).then(res => {
            if (res.status == "200") {
              this.ids.push(res.data.data.id);
              this.getList(this.ids);
              this.$refs["basicForm"].resetFields();
              this.dialogPrint = true;
              this.loading = false;
            } else {
              this.$message.error(res.statusText);
              this.loading = false;
            }
          });
        });
      } else if (type == "editSeave") {
        // 编辑保存
        let p1 = new Promise(resolve => {
          this.$refs["editForm"].validate(valid => {
            if (valid) resolve();
          });
        });
        Promise.all([p1]).then(() => {
          SampleManageApi.update(this.selectItem).then(res => {
            if (res.status == "200") {
              this.getList();
              this.dialogEdit = false;
            } else {
              this.$message.error(res.statusText);
            }
          });
        });
      } else if (type == "editAndPrint") {
        // 打印并保存
        this.printStatus = true;
        this.loadingTitle = "采血卡打印";
        let p1 = new Promise(resolve => {
          this.$refs["editForm"].validate(valid => {
            if (valid) resolve();
          });
        });
        Promise.all([p1]).then(() => {
          SampleManageApi.update(this.selectItem).then(res => {
            if (res.status == "200") {
              this.getList();
              this.dialogEdit = false;
              this.dialogPrint = true;
            } else {
              this.$message.error(res.statusText);
            }
          });
        });
      }
    },
    // 分页
    handleSizeChange: function(val) {
      this.pageSize = val;
    },
    // 选择页码
    handleCurrentChange: function(currentPage) {
      this.pageIndex = currentPage;
    }
  },
  watch: {
    "basicData.birthTime": function(v) {
      if (v) {
        this.changeBirthTime(v, "b");
        if (this.basicData.birthTime != "" && this.basicData.bloodTime != "") {
          let s1 = new Date(this.basicData.birthTime.replace(/-/g, "/"));
          let s2 = new Date(this.basicData.bloodTime.replace(/-/g, "/"));
          var ms = Math.abs(s1.getTime() - s2.getTime());
          let timeCount = ms / 1000 / 60 / 60;
          if (timeCount < 72) {
            this.$confirm("出生不足72小时，是否确认采血?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {})
              .catch(() => {
                this.basicData.bloodTime = "";
              });
          }
        }
      }
    },
    "basicData.bloodTime": function(v) {
      if (v) {
        this.changeBloodTime(v, "b");
        if (this.basicData.birthTime != "" && this.basicData.bloodTime != "") {
          let s1 = new Date(this.basicData.birthTime.replace(/-/g, "/"));
          let s2 = new Date(this.basicData.bloodTime.replace(/-/g, "/"));
          var ms = Math.abs(s1.getTime() - s2.getTime());
          let timeCount = ms / 1000 / 60 / 60;
          if (timeCount < 72) {
            this.$confirm("出生不足72小时，是否确认采血?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {})
              .catch(() => {
                this.basicData.bloodTime = "";
              });
          }
        }
      }
    },
    "selectItem.birthTime": function(v) {
      if (v) {
        this.changeBirthTime(v);
        if (
          this.selectItem.birthTime != "" &&
          this.selectItem.bloodTime != ""
        ) {
          let s1 = new Date(this.selectItem.birthTime.replace(/-/g, "/"));
          let s2 = new Date(this.selectItem.bloodTime.replace(/-/g, "/"));
          var ms = Math.abs(s1.getTime() - s2.getTime());
          let timeCount = ms / 1000 / 60 / 60;
          if (timeCount < 72) {
            this.$confirm("出生不足72小时，是否确认采血?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {})
              .catch(() => {
                this.selectItem.bloodTime = "";
              });
          }
        }
      }
    },
    "selectItem.bloodTime": function(v) {
      if (v) {
        this.changeBloodTime(v);
        if (
          this.selectItem.birthTime != "" &&
          this.selectItem.bloodTime != ""
        ) {
          let s1 = new Date(this.selectItem.birthTime.replace(/-/g, "/"));
          let s2 = new Date(this.selectItem.bloodTime.replace(/-/g, "/"));
          var ms = Math.abs(s1.getTime() - s2.getTime());
          let timeCount = ms / 1000 / 60 / 60;
          if (timeCount < 72) {
            this.$confirm("出生不足72小时，是否确认采血?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {})
              .catch(() => {
                this.selectItem.bloodTime = "";
              });
          }
        }
      }
    }
  }
};
</script>

<style lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
#sample-manage {
  .el-form-item__content,
  .el-date-editor,
  .el-select,
  .el-textarea {
    width: 100% !important;
  }
  .pj {
    .el-form-item__label {
      width: 83px !important;
    }
  }
  .el-range-separator {
    width: 10%;
  }
  .el-textarea {
    width: 96.6%;
  }
  // .el-form-item__content,
  // .el-date-editor {
  //   width: 60% !important;
  // }
  // .el-input {
  //   width: 80% !important;
  // }

  .el-select {
    width: 100% !important;
  }
  overflow: auto;
  height: 100%;
  .el-table__header {
    th {
      border: none;
    }
    th:first-child {
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }
    th:last-child {
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
    }
  }
  .mores {
    .flex;
    justify-content: flex-start;
    width: 100%;
    background: #188ff233;
    height: 30px;
    padding: 5px 8px;
    .more-title {
      font-family: SourceHanSansSC;
      font-style: normal;
      letter-spacing: 0px;
      line-height: 20px;
      text-decoration: none;
      margin-right: 1rem;
      font-size: 14px;
      font-weight: 500;
      color: #000;
    }
  }
  .buttom {
    margin-top: 15px;
    width: 100%;
    .flex;
  }
  .print-dialog {
    .print-form {
      max-height: 500px;
      overflow: auto;
      display: flex;
      flex-direction: column;
      flex-flow: wrap;
      .print-item {
        width: 50%;
        .flex;
        justify-content: flex-start;
        color: #222222;
        font-size: 15px;
        margin-top: 10px;
        .title {
          font-weight: bold;
          flex: 0.4;
        }
        .value {
          flex: 0.6;
          font-weight: bold;
          overflow-wrap: anywhere;
        }
      }
    }
    .el-dialog__footer {
      .flex;
    }
    .el-dialog__header {
      background: #2669f3;
    }
  }
}
</style>
